<template>
  <div class="add-course">
    <x-header :left-options="{preventGoBack: true}" title="来评价"
      @on-click-back="showToast=true"><a slot="right"></a>
    </x-header>
    <group title="基本信息">
      <cell title="老师姓名">{{detailObj.title}}</cell>
      <cell title="性别">{{detailObj.courseObj && detailObj.courseObj.gender}}</cell>
      <cell title="所在学院">{{detailObj.courseObj && detailObj.courseObj.college}}</cell>
      <cell title="所教课程">{{detailObj.content}}</cell>
      <cell title="综合评分">
        <div>
          <span class="score">{{Average(detailObj.scores) || 0}}分 | </span>
          <span class="total">{{detailObj.cmtNum || 0}}人评价</span>
        </div>
      </cell>
    </group>
    <group title="教学打分（必填）" class="rater-group">
      <cell v-for="(item,i) in form.pointList" :key="i" :title="item.title">
        <rater active-color="#EFA79B" v-model="item.val" :font-size="24"
         :disabled="detailObj.creatorId == userInfo._id"></rater>
      </cell>
    </group>
    <!-- <group title="教学特点2" v-else>
      <cell v-for="(item,i) in pointLists" :key="i" :title="item.title">
        <rater active-color="#EFA79B" v-model="item.val"></rater>
      </cell>
    </group> -->
    <group title="教师标签（选填）">
      <checker v-model="form.tags" type="checkbox"
        default-item-class="my-item"
        selected-item-class="my-item-selected"
        disabled-item-class="my-item-selected detail">
        <checker-item v-for="(item,i) in form.tagsList" :key="i" :value="i"
        >{{item.name}}</checker-item>
        <x-button @click.native="addTag" class="add-btn" v-if="false">+</x-button>
      </checker>
    </group>
    <!-- <group title="标签">
      <checker
         v-model="detailObj.tags"
         type="checkbox"
         default-item-class="my-item"
         selected-item-class="my-item-selected detail">
        <checker-item
        disabled
        v-for="(item,i) in tagsLists"
        :key="i" :value="item.id">
        {{item.name}}
        </checker-item>
      </checker>
    </group> -->
    <group title="添加评论（选填）">
      <x-textarea v-model="form.content" placeholder="请填写评论" :max="800"></x-textarea>
    </group>
    <br>
    <div v-transfer-dom>
      <confirm v-model="showInput"
      show-input
      title="请输入标签"
      ref="confirm5"
      @on-show="onShow5"
      @on-confirm="onConfirm5"
      >
      </confirm>
    </div>
    <x-button @click.native="isValid" class="btn" type="primary">发表评价</x-button>
    <!-- <toast v-model="showMsg" @on-hide="onHide">评价帖子成功</toast> -->

    <x-dialog v-model="showToast" :dialog-style="{'text-align': 'left'}" class="back-tip">
      <div class="tip-content">
        <div class="title">离开此次评价吗？</div>
        <div class="tip-btn">
          <span class="cancel" @click="showToast=false;$router.back()">确认离开</span>
          <span class="confirm" @click="showToast=false">继续评价</span>
        </div>
      </div>
    </x-dialog>
    <x-dialog v-model="showPublish" :dialog-style="{'text-align': 'left'}" class="back-tip">
      <div class="tip-content">
        <div class="title">
          您的意见将会给其他同学带来极大的帮助。<br/>
          1. 请勿出现老师个人隐私<br/>
          2.不允许对老师人身攻击
        </div>
        <div class="tip-btn">
          <span class="cancel" @click="showPublish=false;">继续编辑</span>
          <span class="confirm" @click="showPublish=false;doPublish()">确认发布</span>
        </div>
      </div>
    </x-dialog>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import Avatar from 'vue-avatar';
import { formatMsgTime } from '../../js/getTime'
import {
  XHeader,
  Popup,
  Checker,
  CheckerItem,
  Group,
  XButton,
  Tab,
  TabItem,
  ButtonTab,
  ButtonTabItem,
  Confirm,
  Cell,
  Search,
  Swiper,
  Grid,
  GridItem,
  Card,
  Rater,
  XTextarea,
  XDialog,
  XInput,
  Toast,
  TransferDom
} from 'vux';

const ListStore = namespace('list');
const DetailStore = namespace('detail');
const PublishStore = namespace('publish');

@Component({
  directives: {
    TransferDom
  },
  components: {
    TransferDom,
    Avatar,
    XHeader,
    Popup,
    Checker,
    CheckerItem,
    Group,
    XButton,
    Tab,
    TabItem,
    ButtonTab,
    ButtonTabItem,
    Confirm,
    Cell,
    Search,
    Swiper,
    Grid,
    GridItem,
    Card,
    Rater,
    XTextarea,
    XDialog,
    XInput,
    Toast
  }
})
export default class Index extends Vue {
  @DetailStore.Action getDetail;
  @DetailStore.State detail;
  @PublishStore.Action getCmtCourse;
  @ListStore.Action getCourse;
  @ListStore.State courseDetail;
  @ListStore.State pointList;
  @ListStore.State tagsList;
  userInfo = (localStorage.getItem('loginInfo') && JSON.parse(localStorage.getItem('loginInfo')).user) || ''
  showMsg = false
  showInput = false
  tagName = ''
  form = {
    courseName: '',
    teacher: '',
    college: '',
    tags: '',
    content: '',
    score: [],
    pointList: [],
    tagsList: []
  }
  tagsLists = []
  pointLists = []
  detailObj = {
    cmt: {
      cmts: []
    }
  }
  showToast = false
  showPublish = false
  currentId = ''
  getTime (t) {
    return formatMsgTime(t * 1000)
  }
  Average (scores) {
    return scores && ((scores.reduce((acc, item) => acc + item, 0) / scores.length).toFixed(1) || 0);
  }
  created () {
    this.getDetail({_id: this.$route.params.id}).then(res => {
      if (res) {
        this.$vux.toast.text(res, 'middle');
      } else {
        // const { total, list, hasMore } = this.detail
        this.detailObj = this.detail
        if (this.detailObj.creatorId === this.userInfo._id) {
          if (this.detail.scores.length) {
            // this.pointLists = this.pointList.filter((item, index) => {
            this.form.pointList = this.pointList.filter((item, index) => {
              item.val = this.detail.scores[index];
              return item;
            })
          }
          this.form.tagsList = this.tagsList
          // if (this.detail.tags.length) {
          //   // this.tagsLists = this.tagsList.filter(item => {
          //   this.form.tagsList = this.tagsList.filter(item => {
          //     if (this.detail.tags.includes(item.id + '')) {
          //       return item;
          //     }
          //   })
          // }
        } else {
          this.pointList.length > 0 && this.pointList.forEach(item => {
            item.val = 0
            this.form.pointList.push(Object.assign({}, item))
          })
          this.form.tagsList = this.tagsList
        }
      }
    })
  }
  onConfirm5 (value) {
    if (!value) {
      this.$vux.toast.text('请输入标签名称', 'middle');
      this.showInput = true;
      return false;
    } else {
      this.$refs.confirm5.setInputValue('')
      // this.tagName = value
      this.form.tagsList.push({ id: this.form.tagsList.length, name: value })
    }
  }
  isValid () {
    let flag = true
    const { pointList } = this.form
    // if (!content) {
    //   flag = false
    //   this.$vux.toast.text('请输入评价内容', 'middle');
    // }
    // if (tags.length === 0) {
    //   flag = false
    //   this.$vux.toast.text('请添加标签', 'middle');
    // }
    if (pointList.length > 0) {
      for (let i = 0; i < pointList.length; i++) {
        if (pointList[i].val === 0) {
          flag = false
          this.$vux.toast.text('请完善教学特点评价', 'middle');
          break;
        }
      }
    }
    if (flag) {
      // this.doPublish()
      this.showPublish = true;
    }
  }
  doPublish () {
    const { tags, pointList, content } = this.form;
    const params = {
      postId: this.detailObj._id,
      tags,
      scores: pointList.map(item => item.val),
      cmt: content
    }
    this.getCmtCourse(params).then(res => {
      if (res) {
        this.$vux.toast.text(res, 'middle');
      } else {
        // this.showMsg = true
        this.$vux.toast.text('评价帖子成功', 'middle');
        setTimeout(() => {
          this.$router.back()
        }, 1000);
      }
    })
  }
  onHide () {
    this.$router.go(-1);
  }
  onShow5 () {
    this.$refs.confirm5.setInputValue('')
  }
  addTag () {
    this.showInput = true
  }
}
</script>
<style lang="less">
  .add-course {
    padding-bottom: 55px;
    padding-top: 46px;
    .weui-cell {
      padding: 5px 15px;
    }
    .rater-group {
      .weui-cell {
        padding: 4px 15px;
      }
    }
    .comment-list {
      // font-size: 12px;
      .weui-cell__ft {
        text-align: left;
        width: 100%;
      }
    }
    .focusman {
      height: 18px;
      // border: 1px solid #E5E5E5;
      padding: 0px 8px;
      color: #666666;
      // font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .top {
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .right {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .right-1 {
        display: flex;
        flex-direction: column;
      }
      .right-2 {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .vux-header {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
    }
    .btn {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .vux-checker-box {
      padding: 15px;
      padding-bottom: 9px;
      padding-right: 9px;
      padding: 15px;
      padding-bottom: 9px;
      padding-right: 9px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .my-item {
      font-size: 12px;
      width: 70px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 3px;
      border: 1px solid #ccc;
      background-color: #fff;
      margin-right: 6px;
      margin-bottom: 6px;
    }
    .my-item-selected {
      // background: #ffffff url(../../assets/active.png) no-repeat right bottom;
      background-color: #ebebeb;
    }
    .add-btn {
      // font-size: 12px;
      width: 70px;
      height: 26px;
      display: inline-block;
      line-height: 26px;
      text-align: center;
      background-color: #fff;
      margin-right: 6px;
    }
  }
  .back-tip {
    text-align: left!important;
    .weui-dialog {
      border-radius: 12px!important;
    }
    .tip-content {
      padding: 20px 24px 15px;
      .title {
        margin-bottom: 10px;
        font-size: 16px;
        color: #333;
      }
      .tip-btn {
        text-align: right;
        span {
          display: inline-block;
          // width: 200px;
          height: 30px;
          line-height: 30px;
          padding: 0 5px;
          font-size: 14px;
          color: #2d8a20;
        }
      }
    }
  }
</style>
